<script setup>

import {inject, onMounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {doDelete, doGet} from "@/util/request.js";
import {showMessage} from "@/util/message.js";
import {ElMessageBox} from "element-plus";

const refresh = inject('refresh')
//路由参数对象
const route = useRoute()
//路由对象
const router = useRouter()
// 交易列表
const tranList = ref()
// 分页信息
const pageInfo = ref({})
// 加载数据
const loadData = (current) => {
  // 获取分页信息
  let params = {
    current:current,
    pageSize: 15
    /*tranNo:tranList.value.tranNo,
    customerName:tranList.value.customerName,
    money:tranList.value.money,
    expectedTime:tranList.value.expectedTime,
    stage:tranList.value.stage,
    nextContactTime:tranList.value.nextContactTime,
    createTime:tranList.value.createTime*/
  }
  doGet('/api/tran/pageList', params).then(resp => {
    console.log(resp.data.data.list)
    if (resp.data.code === 200){
      tranList.value = resp.data.data.list
      pageInfo.value.total = resp.data.data.total
      pageInfo.value.pageSize = resp.data.data.pageSize
    }
    else {
      showMessage('查询交易列表失败', resp.data.msg, 'error')
    }
  })
}
/*---------------------跳转----------------------*/
//详情
const detailTran = (id) => {
  // 跳转
  router.push('/index/tran/detail/' + id)
}
// 编辑
const edit = (id) => {
  // 跳转
  router.push('/index/tran/edit/' + id)
}
//添加
const addUser = () => {
  // 跳转
  router.push('/index/tran/add')
}
/*---------------------跳转----------------------*/
//批量删除
let ids = []
const handlerSelectChange = (val) => {
  ids = []
  val.forEach(item => {
    ids.push(item.id)
  })
}
const delBatch = () => {
  if (ids.length <= 0){
    showMessage('请选择要删除的数据',  'warning')
    return
  }
  // 弹框
  ElMessageBox.confirm('确认删除该用户吗？').then(() => {
    // 删除
    doDelete('/api/tran/batchDelete/'+ ids,{}).then(resp => {
      // 判断是否删除成功
      if (resp.data.code === 200) {
        // 提示
        showMessage('删除活动成功', 'success')
        setTimeout(() => {
          //返回上一页
          // router.go(0)
          refresh()
        }, 600)
      } else {
        // 提示
      }
    }).catch({})
  })
}
//删除
const del = (id) => {
  // 确认删除
  ElMessageBox.confirm('确认删除该活动吗？').then(() => {
    // 删除
    doDelete('/api/tran/batchDelete/'+ id,{}).then(resp => {
      // 判断是否删除成功
      if (resp.data.code === 200) {
        // 提示
        showMessage('删除活动成功', 'success')
        setTimeout(() => {
          //刷新页面
          refresh()
        })
      }
    })
  })
}


onMounted(()=>{
  loadData(1)
})
</script>

<template>

<!--  <el-button type="primary" @click="addUser">添加用户</el-button>-->
  <el-button type="danger" @click="delBatch">批量删除</el-button>

  <el-table
      :data="tranList"
      :border="true"
      @selection-change="handlerSelectChange"
      style="width: 100%;margin-top: 10px">
    <el-table-column type="selection" align="center"/>
    <el-table-column label="序号" type="index" width="60px" align="center"/>
    <el-table-column label="流水号" property="tranNo" align="center"/>
    <el-table-column label="客户姓名" property="customerName" align="center"/>
    <el-table-column label="交易金额" property="money" align="center"/>
    <el-table-column label="预计成交日期" property="expectedDate" align="center"/>
    <el-table-column label="交易所处阶段" property="stageName" align="center"/>
    <el-table-column label="下次联系时间" property="nextContactTime" align="center"/>
    <el-table-column label="创建人" property="createByName" align="center"/>
    <el-table-column label="创建时间" property="createTime" align="center"/>
    <el-table-column label="操作" width="200" align="center">
      <!--编辑&详情&删除按钮-->
      <template #default="scope">
        <el-button type="success" size="small" @click="detailTran(scope.row.id)">详情</el-button>
        <el-button type="primary" size="small" @click="edit(scope.row.id)">编辑</el-button>
        <el-button type="danger" size="small" @click="del(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!--分页-->
  <el-pagination
      layout="prev, pager, next, jumper"
      style="margin-top: 10px"
      small="small"
      :background="true"
      :total="pageInfo.total"
      :page-size="pageInfo.pageSize"
      @change="loadData"/>
</template>

<style scoped>

</style>